<template>
  <div>
    <div>
      <el-row :gutter="20" class="elCardRow">
        <el-col :span="8">
          <el-card class="box-card elCardBg">
            <p class="mt10 mb10">肠癌多基因甲基化检测·检测版</p>
            <div>{{formStatisticObj.testItem0 || 0}}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card elCardBg elCardBg-2">
            <p class="mt10 mb10">肠癌多基因甲基化检测·标准版</p>
            <div>{{formStatisticObj.testItem1 || 0}}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card elCardBg elCardBg-3">
            <p class="mt10 mb10">合同总数</p>
            <div>{{formStatisticObj.contract || 0}}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="dataClass">
      <p class="mt20 mb20">数据列表</p>
      <el-row :gutter="20">
        <el-col :span="13">
          <el-card class="box-card">
            <template>
              <el-table
                :data="configList"
                v-loading="loading"
                border
                style="width: 100%">
                <el-table-column
                  label="序号"
                  type="index"
                  width="60"
                  align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="患者姓名"
                  align="center"
                  prop="name"
                  width="100"
                />
                <el-table-column
                  label="检测项目"
                  align="center"
                  prop="testItem"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">{{ scope.row.testItem?testItemOptionsObj[scope.row.testItem]:'' }}</template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleView(scope.row)"
                    >
                     查看
                    </el-button>
                  </template>
                </el-table-column>

              </el-table>
            </template>
          </el-card>

        </el-col>
        <el-col :span="11">
          <el-card class="box-card">
            <div>
              <div class="chart-wrapper">
                <pie-chart :echartData="echartData" :colorList="colorList"/>
                <div class="echartInto">
                  <div class="echartIntoItem" v-for="(item, index) in echartData" :key="index">
                    <div class="echartIntoBg" :style="{'background': item.bg}"></div>
                    <div class="echartIntoItem2">{{item.name}}</div>
                    <div>{{item.value}}</div>
                    <div>{{item.rate}}</div>
                  </div>
                </div>
              </div>
            </div>

          </el-card>

        </el-col>
      </el-row>
    </div>

  </div>

</template>

<script>

import PieChart from "./PieChart";
import { formStatistic, contractList } from "@/api/singera/applyForm";

export default {
  name: "reportMsg",
  components: {
    PieChart,
  },
  data(){
    return {
      testItemOptionsObj:{
        '0': 'CA0L01肠癌多基因甲基化检测·标准版',
        '1': 'CA0L02肠癌多基因甲基化检测·检测版'
      },
      configList:[],
      formStatisticObj:{},
      echartData:[],
      loading: false,
      colorList:['#B881FF', '#5DC999', '#FF7397', '#5BA6F6', '#FFBC65', '#A1D8D5', '#519ABD', '#48ADC2','#D82A17', '#075A8C', '#196157', '#0583F1', '#E58278', '#C0A287', '#BBC323', '#C06057'],

      initTimer: null
    }
  },
  created () {
    this.geStatistic();
    this.getList()
  },
  mounted(){
    //做一个定时器，每60秒调用一次
    this.initTimer = setInterval(()=>{
      this.geStatistic();
      this.getList()
    },60000)
  },
  //在 beforeRouteLeave (to, from, next) {} 离开路由的时候清除定时器
  beforeRouteLeave (to, from, next) {
    clearInterval(this.initTimer)
    next()
  },
  methods: {
    /** 查询参数列表 */
    getList () {
      this.loading = true
      contractList({ pageNum: 1, pageSize: 10}).then(response => {
        this.configList = []
          this.loading = false
          this.configList = response.rows;
        }
      );
    },
    geStatistic(){
      formStatistic().then((response) => {
          this.formStatisticObj = response;
        this.echartData = []
          // 慢性腹泻史
          if (this.formStatisticObj.diarrhea){
            this.echartData.push({
              name:'慢性腹泻史',
              value: this.formStatisticObj.diarrhea,
              rate: this.formStatisticObj.diarrheaRate,
              bg: this.colorList[0]
            })
          }
          // 慢性便秘史
          if (this.formStatisticObj.astriction){
            this.echartData.push({
              name:'慢性便秘史',
              value: this.formStatisticObj.astriction,
              rate: this.formStatisticObj.astrictionRate,
              bg: this.colorList[1]
            })
          }
          // 黏液或便血史
          if (this.formStatisticObj.hemafecia){
            this.echartData.push({
              name:'黏液或便血史',
              value: this.formStatisticObj.hemafecia,
              rate: this.formStatisticObj.hemafeciaRate,
              bg: this.colorList[2]
            })
          }
          // 慢性阑尾炎或阑尾切除史
          if (this.formStatisticObj.appendicitis){
            this.echartData.push({
              name:'慢性阑尾炎或阑尾切除史',
              value: this.formStatisticObj.appendicitis,
              rate: this.formStatisticObj.appendicitisRate,
              bg: this.colorList[3]
            })
          }
          // 慢性胆囊炎或胆囊切除史
          if (this.formStatisticObj.cholecystitis){
            this.echartData.push({
              name:'慢性胆囊炎或胆囊切除史',
              value: this.formStatisticObj.cholecystitis,
              rate: this.formStatisticObj.cholecystitisRate,
              bg: this.colorList[4]
            })
          }
          // 慢性肠炎史
          if (this.formStatisticObj.enteritis){
            this.echartData.push({
              name:'慢性肠炎史',
              value: this.formStatisticObj.enteritis,
              rate: this.formStatisticObj.enteritisRate,
              bg: this.colorList[5]
            })
          }
          // 近20年来有无经历过对精神造成较大创伤或痛苦的事件
          if (this.formStatisticObj.psychologicalTrauma){
            this.echartData.push({
              name:'近20年来经历过对精神造成较大创伤或痛苦的事件',
              value: this.formStatisticObj.psychologicalTrauma,
              rate: this.formStatisticObj.psychologicalTraumaRate,
              bg: this.colorList[6]
            })
          }
          // 癌症史
          if (this.formStatisticObj.cancer){
            this.echartData.push({
              name:'癌症史',
              value: this.formStatisticObj.cancer,
              rate: this.formStatisticObj.cancerRate,
              bg: this.colorList[7]
            })
          }
          // 肠息肉史
          if (this.formStatisticObj.intestinalPolyp){
            this.echartData.push({
              name:'肠息肉史',
              value: this.formStatisticObj.intestinalPolyp,
              rate: this.formStatisticObj.intestinalPolypRate,
              bg: this.colorList[8]
            })
          }
        // 一级亲属有肠癌史
        if (this.formStatisticObj.intestinalPolyp){
          this.echartData.push({
            name:'一级亲属有肠癌史',
            value: this.formStatisticObj.directRelativeIntestinalCancer,
            rate: this.formStatisticObj.directRelativeIntestinalCancerRate,
            bg: this.colorList[9]
          })
        }
          // 吸烟史
          if (this.formStatisticObj.smoking){
            this.echartData.push({
              name:'吸烟史',
              value: this.formStatisticObj.smoking,
              rate: this.formStatisticObj.smokingRate,
              bg: this.colorList[10]
            })
          }
          // 饮酒史
          if (this.formStatisticObj.drink){
            this.echartData.push({
              name:'饮酒史',
              value: this.formStatisticObj.drink,
              rate: this.formStatisticObj.drinkRate,
              bg: this.colorList[11]
            })
          }
          // 糖尿病史等既往病史
          if (this.formStatisticObj.diabetes){
            this.echartData.push({
              name:'糖尿病史等既往病史',
              value: this.formStatisticObj.diabetes,
              rate: this.formStatisticObj.diabetesRate,
              bg: this.colorList[12]
            })
          }

        }
      );
    },
    handleView(row){
      this.$router.push({path:'/contractMge',
        query:{row: row}})
    },
  }
}
</script>

<style scoped lang="scss">
.dataClass{
  margin: 20px 0;
  padding: 0 20px;
  &>p{
    font-weight: bold;
    color: #333333;
  }
  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    background: #F1F8FF;
  }
  ::v-deep .el-table .fixed-width .el-button--mini{
    font-weight: bold;
    color: #004EA2;
  }
  .echartInto{
    font-size: 12px;
    color: #333333;
    padding: 0 20px;
    .echartIntoItem{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 10px;
      &>div{
        flex: 1;
        margin-left: 10px;
      }
      .echartIntoItem2{
        flex: 2;
      }
      .echartIntoBg{
        width: 50px;
        height: 20px;
        background: red;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
.elCardRow{
  margin: 20px 0;
  padding: 0 20px;
  .elCardBg{
    background: linear-gradient(90deg, #FFA0BF 0%, #FF7397 100%);
    box-shadow: 0px 16px 18px -6px rgba(255,115,151,0.25);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    text-align: center;
    color: #fff;
    font-family: DengXian-Bold, DengXian;
    font-weight: bold;
    p{
      font-size: 12px;
    }
  }
  .elCardBg-2{
    background: linear-gradient(90deg, #D6ACFF 0%, #B881FF 100%);
    box-shadow: 0px 16px 18px -6px rgba(184,129,255,0.25);
  }
  .elCardBg-3{
    background: linear-gradient(90deg, #85E0BD 0%, #5DC999 100%);
    box-shadow: 0px 16px 18px -6px rgba(93,201,153,0.25);
  }
  .elCardBg-4{
    background: linear-gradient(90deg, #ADD8F8 0%, #3280D4 100%);
    box-shadow: 0px 16px 18px -6px rgba(0,78,162,0.25);
  }
}



</style>
